<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color</title>
    <style>
        li:nth-child(2n) {
            background-color: red;
        }
        li:nth-child(2n-1) {
            background-color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li class="li-1">li_1</li>
        <li class="li-2">li_2</li>
        <li class="li-3">li_3</li>
        <li class="li-4">li_4</li>
        <li class="li-5">li_5</li>
    </ul>


    <script>
        var ulEl = document.querySelector('ul');
        var liDom = document.getElementsByTagName('li');
        var liEls = ulEl.childNodes;
        console.log(liEls);

        for (var i = 0; i < liDom.length; i++) {
            var tempColor = '';
            
            if (i%2 === 0) {
                tempColor = 'green';
            } else {
                tempColor = 'red';
            }

            liDom[i].onmouseover = function () {
                this.style.backgroundColor = 'orange';
            }

            liDom[i].onmouseout = function () {
                console.log(i);
                this.style.backgroundColor = tempColor;
            }
        
        }
    </script>
</body>
</html>